<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="jquery-1.11.1.js"></script>
    <script type="text/javascript">
        $(function(){
            /*
               动态创建元素
               表示给匹配的这个元素绑定单机事件，并且由这个元素来触发的
               此处是给id为btnOn的元素绑定事件
             */

            /*
             表示给匹配的元素绑定事件，并且触发事件是由传入的p这个选择器匹配的元素来触发
             */
          /*  $("div").on("click",".Pro",function(){
                alert($(this).text());
            })*/
            $("div").on("click","p",function(){
                alert($(this).text());
            })


            /*
                 事件绑定代码是在页面加载的时候执行的
                 事件触发的代码是在单机按钮的时候执行的，此时，事件已经绑定成功，并且所有的js代码也都执行完成了

            */
           /* var a = "Tom";
            $("#btnOn").on("click",function(){
                alert(a);   //Jack
            })
            a = "Jack";
            $("#btnGet").on("click",function(){
                alert(a);   //Jack
            })*/

            var a = "Tom";
            $("#btnOn").on("click",{Str:a},function(event){
                alert(event.data.Str);
            })
            a = "Jack";
            $("#btnGet").on("click",{Str:a},function(event){
                alert(event.data.Str);
            })
        })
    </script>
</head>
<body>
   <button id="btnOn">创建元素</button>
   <button id="btnGet">展示</button>
   <div>
       <p class="Pro">这是页面中已经存在的p元素</p>
   </div>
</body>
</html>